<template>
  <div>
    <div class="header">
      <div>武汉</div>
      <van-search
        placeholder="请输入搜索关键词"
        input-align="center"
        @click="toSearch"
      />
    </div>
    <div class="banner">
      <banner></banner>
    </div>
    <div class="content">
      <More :title="MusicTitle[0]" :src="Icon[0]">
        <span class="more" slot="more" @click="toMore(MusicTitle[0])">更多></span>
      </More>
      <div class="container">
        <item :data="itemHot" v-for="itemHot of hot" :key="itemHot.id" @click.native="toDetail(itemHot.id)"></item>
      </div>
      <More :title="MusicTitle[1]" :src="Icon[1]">
        <span class="more" slot="more" @click="toMore(MusicTitle[1])">更多></span>
      </More>
      <div class="container">
        <item :data="itemHot" v-for="itemHot of New" :key="itemHot.id" @click.native="toDetail(itemHot.id)"></item>
      </div>
      <More :title="MusicTitle[2]" :src="Icon[2]">
        <span class="more" slot="more" @click="toMore(MusicTitle[2])">更多></span>
      </More>
      <div class="container">
        <item :data="itemHot" v-for="itemHot of dj" :key="itemHot.id" @click.native="toDetail(itemHot.id)"></item>
      </div>
    </div>
  </div>
</template>

<script>
import More from "./components/More.vue";
import Banner from "./components/Swiper.vue";
export default {
  data() {
    return {
      hot: [],
      New: [],
      dj: [],
      MusicTitle: ["热门歌曲", "最新音乐", "主播电台"],
      Icon: ["hot.png", "new.png", "dj.png"],
    };
  },
  components: {
    Banner,
    More,
  },
  mounted() {
    this.$http("http://47.108.197.28:3000/banner").then((res) => {
      //   console.log(res.data.banners);
      this.banner = res.data.banners;
    });
    this.$http("http://47.108.197.28:3000/top/playlist/highquality").then(
      (res) => {
        // console.log(res.data.playlists);
        res.data.playlists.forEach((item) => {
          var { coverImgUrl } = item;
          item.picUrl = coverImgUrl;
        });
        this.hot = res.data.playlists.slice(0, 3);
      }
    );
    this.$http("http://47.108.197.28:3000/album/newest").then((res) => {
      //   console.log(res.data.albums);
      this.New = res.data.albums.slice(0, 3);
    });
    this.$http("http://47.108.197.28:3000/personalized/djprogram  ").then(
      (res) => {
        //   console.log(res.data.result);
        this.dj = res.data.result.slice(0, 3);
      }
    );
  },
  methods: {
    toSearch() {
      this.$router.push(`./musicSearch`);
    },
    toMore(val) {
      var title = val;
      this.$router.push(`./moreMusic?title=${title}`);
    },
    toDetail(val) {
      this.$router.push(`./musicDetail/${val}`);
    },
  },
};
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.van-search {
  width: 80%;
}
.container {
  width: 90%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.more {
  display: inline-block;
  float: right;
}
</style>